<script>
import project from "../project/index.vue";
import ModuleCard from "../../../../../components/business/module-card/index.vue";
import citySelect from "../../../../../components/business/city-select/index.vue";
import UFormItem from "../../../../../uni_modules/uview-ui/components/u-form-item/u-form-item.vue";
import {uploadFile} from "../../../../../static/utils/uploadImg";
import imageUpload from "../../../../../components/base/image-upload/index.vue";
import {getLngLatByAddressApi} from "../../../../../api/common/location";

export default {
  name: "index",
  components: {imageUpload, UFormItem, citySelect, ModuleCard, project},
  props: {
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  data(){
    return {
      idCardFront: [],
      idCardBack: [],
    }
  },
  computed: {
    editable() {
      return this.$props.disabled
    },
  },
  methods: {
    idCardFrontAfterRead(event) {
      // this.idCardFront = file
      const file = event.file;
      this['idCardFront'].push({
        ...file,
        status: 'uploading',
        message: '上传中'
      })
      uploadFile('/applet/uploadImageIden', file).then( res => {
        this.$props.formData.idCardFront = JSON.parse(res.data).data.path;
        this.idCardFront.splice(0, 1, Object.assign(this.idCardFront[0], {
          status: 'success',
          message: '上传成功',
          url: JSON.parse(res.data).data.path
        }))
      })
    },
    // 删除身份证正面
    deleteIdCardFront() {
      this.idCardFront = []
    },
    // 删除图片
    deleteImg(key) {
      this[key] = []
    },
    // 公共图片上传
    async uploadImg(event, key) {
      const file = event.file;
      this[key].push({
        ...file,
        status: 'uploading',
        message: '上传中'
      })
      uploadFile('common/upload', file).then( res => {
        this.$props.formData[key] = JSON.parse(res.data).fullPath;
        this[key].splice(0, 1, Object.assign(this[key][0], {
          status: 'success',
          message: '上传成功',
          url: JSON.parse(res.data).fullPath
        }))
      })
    },
    cityChange(arr) {
      this.initLngLat();
    },
    // 根据省市区+详细地址 获取坐标
    async initLngLat() {
      const {province, city, area, address} = this.$props.formData;
      const { data } = await getLngLatByAddressApi([province, city, area, address].join(''));
      if(data){
        this.$props.formData.longitude = data.split(',')[0];
        this.$props.formData.latitude = data.split(',')[1];
      }
    },
    // 银行卡上传完成
    bankCardUploadComplete(url, data) {
      console.log(data)
      if (data) {
        this.$props.formData.bankName = data.info.bankName;
        this.$props.formData.bankCode = data.info.cardNumber;
      }
    },
  }
}
</script>

<template>

  <module-card title="业主信息">

    <u-form-item label="业主姓名" borderBottom>{{formData.tenantName}}</u-form-item>
    <u-form-item label="联系电话" borderBottom>{{formData.mobile}}</u-form-item>
    <u-form-item label="身份证号" borderBottom>{{formData.idCode}}</u-form-item>
    <u-form-item label="安装地址" borderBottom>
      <view>{{formData.province}}{{formData.city}}{{formData.area}}{{formData.address}}</view>
    </u-form-item>
    <u-form-item label="经纬度信息" borderBottom>{{formData.longitude}},{{formData.latitude}}</u-form-item>
    <u-form-item label="身份证号" borderBottom>{{formData.idCode}}</u-form-item>

    <u-form-item
        label="身份证照片"
        ref="item1"
        required
    >
      <view class="cell">
        <view class="cell-bd">
          <u--image :showLoading="true" :src="formData.idCardFront" width="80px" height="80px"></u--image>
        </view>
        <view class="cell-bd ml-15">
          <u--image :showLoading="true" :src="formData.idCardBack" width="80px" height="80px"></u--image>
        </view>
      </view>
    </u-form-item>

    <u-form-item label="开户银行" borderBottom>{{formData.bankName}}</u-form-item>
    <u-form-item label="开户行行号" borderBottom>{{formData.bankNumber}}</u-form-item>
    <u-form-item label="开户支行" borderBottom>{{formData.bankBranch}}</u-form-item>
    <u-form-item label="银行账号" borderBottom>{{formData.bankCode}}</u-form-item>
    <u-form-item
        label="银行卡照片"
        prop="formData.bankCard"
        borderBottom
        ref="item1"
    >
      <u--image :showLoading="true" :src="formData.bankCard" width="80px" height="80px"></u--image>
    </u-form-item>
  </module-card>
</template>

<style scoped lang="scss">

</style>
